<template>
  <header class="header">
    <div class="top">
      <span class="text1">Indicator diagram fault diagnosis</span>
      <ul class="nav">
        <li>
          <router-link to="/home/homePage">CH</router-link>
        </li>
        <li class="home">
          <router-link to="/contact2">Connection</router-link>
        </li>
        <li class="home">
          <router-link to="/about2">About</router-link>
        </li>
        <li class="home">
          <router-link to="/service2">Service</router-link>
        </li>
        <li class="home">
          <router-link to="/english">Homepage</router-link>
        </li>
      </ul>
      <el-button type="text" class="button1" @click="reLogin">Logout</el-button>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const reLogin = () => {
  router.push('/');
};
</script>

<style scoped>
.header {
  height: 60px;
  border-bottom: 1px solid #eeeeee;
}
.top {
  margin-right: 250px;
  margin-top: 10px;
}
.text1 {
  margin-left: 160px;
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  top: 20px;
}

ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  float: right;
}

li a {
  display: block;
  color: #515a6e;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
}
li a:hover {
  background-color: white;
  color: #1c84c6;
}
.button1 {
  position: relative;
  top: -40px;
  left: 100%;
  font-size: 17px;
}
</style>
